<template>
  <keep-alive>
    <iframe :src="url"
            frameborder="0"
            id="bdIframe"
            ref="iframe"
            scrolling="yes"></iframe>
  </keep-alive>
</template>

<script>
export default {
  name: "iframe1",
  data () {
    return {
      url: '',
      title: "",
    }
  },
  created () {
    if (this.$route.params.title) {
      this.$route.meta.title = this.$route.params.title;
    }
  },
  mounted () {
    this.title = this.$route.meta.title
    let srcData = this.$store.state.iframeSrc
    if (srcData.length > 0) {
      let flag = srcData.some(item => {
        return item.title === this.$route.meta.title
      })
      if (flag) {
        srcData.forEach(item => {
          if (item.title === this.$route.meta.title) {
            const oIframe = document.getElementById('bdIframe');
            oIframe.style.width = 100 + '%';
            oIframe.style.height = 99 + '%';
            this.url = item.src
          }
        })
      } else {
        this.url = this.$route.params.url;
        const oIframe = document.getElementById('bdIframe');
        oIframe.style.width = 100 + '%';
        oIframe.style.height = 99 + '%';
      }

    } else {
      this.url = this.$route.params.url;
      const oIframe = document.getElementById('bdIframe');
      oIframe.style.width = 100 + '%';
      oIframe.style.height = 99 + '%';
    }

    // iframe
  },
  beforeDestroy () {
    if (this.title != "") {
      this.$store.commit("setIframeSrc", { title: this.title, src: this.url })
    }
  }

}
</script>

<style scoped>
</style>
